<template>
  <div>
    <el-card>
      <!--    面包屑-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/cscindex' }">客户服务中心</el-breadcrumb-item>
        <el-breadcrumb-item>客户管理</el-breadcrumb-item>
        <el-breadcrumb-item>客户详情</el-breadcrumb-item>
      </el-breadcrumb>
      <br />
      <!--      用户资料-->
      <el-card>
        <table>
          <tr>
            <td rowspan="3">
              <el-avatar shape="square" :size="80" :src="url" style="margin-right:20px">user</el-avatar>
            </td>
            <td style="width:22%;">
              <span>客户ID：{{id}}</span>
            </td>
            <td style="width:22%">
              <span>客户名称：{{name}}</span>
            </td>
            <td style="width:22%">
              <span>移动电话：{{phone}}</span>
            </td>
            <td style="width:22%"></td>
          </tr>
          <tr>
            <td colspan="2">
              <span>工作地址：{{employer}}</span>
            </td>
            <td>
              <span>邮编：{{emailNnumber}}</span>
            </td>
          </tr>
          <tr>
            <td>
              <span>E-mail：{{email}}</span>
            </td>
          </tr>
        </table>
      </el-card>
      <br />
      <!--    用户订单表格-->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="clientId" label="客户编号" width="100"></el-table-column>
        <el-table-column prop="consigneephone" label="收货人电话" width="100"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="300"></el-table-column>
        <el-table-column prop="deliveryInformation" label="投递信息" width="300"></el-table-column>
        <el-table-column prop="finishDate" label="要求完成日期" width="120"></el-table-column>
        <el-table-column prop="fundingInformation" label="资金信息" width="120"></el-table-column>
        <el-table-column prop="id" label="订单号" width="120"></el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="120"></el-table-column>
        <el-table-column prop="orderType" label="订单类型" width="120"></el-table-column>
        <el-table-column prop="receiver" label="收货人" width="120"></el-table-column>
        <el-table-column prop="remark" label="备注信息" width="120"></el-table-column>
        <el-table-column prop="shippingAddress" label="订单地址" width="120"></el-table-column>
        <el-table-column prop="theTotalAmountOfOrders" label="订单总金额" width="120"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="120"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "customview",
  data() {
    return {
      url:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3746649563,1078917556&fm=26&gp=0.jpg',
      selectedvalue: "",
      options: [
        {
          value: 0,
          label: "",
        },
        {
          value: 1,
          lable: "",
        },
      ],
      tableData: [],
      name: "",
      address: "",
      phone: "",
      email: "",
      emailNnumber: "",
      employer: "",
      id: "",
      landline: "",
    };
  },
  methods: {
    async getList() {
      const id = sessionStorage.getItem("customid");
      const { data: res } = await this.$http
        .get(`/api/client_server/query_client_detailInfo/${id}`)
        .catch((err) => {
          this.$message.error("对不起！服务器异常或权限不够！");
          console.log(err.message);
        });
      if (res.code !== 200) {
        this.$message.error("获取流动表信息失败");
      }
      console.log(res);
      this.tableData = res.data.listOrder;
      // console.log(res.data.listOrder)
      this.name = res.data.name;
      this.id = res.data.id;
      this.address = res.data.address;
      this.email = res.data.email;
      this.emailNnumber = res.data.emailNnumber;
      this.landline = res.data.landline;
      this.employer = res.data.employer;
      this.phone = res.data.phone;
      // this.$forceUpdate()
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
</style>
